<template>
  <common-edit-dialog
    :title="dialogTitle"
    :visible.sync="dialogShow"
    @cancel="dialogShow = false"
    @submit="submitForm"
    :button-loading="isPersistenceLoading"
    width="55%"
  >
    <el-form class="dialog-form" ref="form" :model="form" :rules="rules" label-width="100px" @submit.native.prevent>
      <el-row :gutter="18">
        <el-col :span="12">
          <el-form-item label="策略名称" prop="ruleName">
            <common-input
              v-model="form.ruleName"
              placeholder="请输入策略名称"
              :maxlength="16"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12" style="display: flex; align-items: center">
          <el-form-item label="密码长度" prop="minLength">
            <common-input-number :max-length="2" v-model="form.minLength"/>
          </el-form-item>
          <div style="height:33px;margin: 0 8px;">-</div>
          <el-form-item class="maxLength" prop="maxLength">
            <common-input-number :max-length="2" v-model="form.maxLength"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="数字" prop="hasNumber">
            <el-radio-group v-model="form.hasNumber">
              <el-radio :label="0">必须包含</el-radio>
              <el-radio :label="2">不限制</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="小写字母" prop="hasLower">
            <el-radio-group v-model="form.hasLower">
              <el-radio :label="0">必须包含</el-radio>
              <el-radio :label="2">不限制</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="大写字母" prop="hasUpper">
            <el-radio-group v-model="form.hasUpper">
              <el-radio :label="0">必须包含</el-radio>
              <el-radio :label="2">不限制</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="首字母大写" prop="firstIsUpper">
            <el-radio-group v-model="form.firstIsUpper">
              <el-radio :label="0">必须包含</el-radio>
              <el-radio :label="2">不限制</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="padding: 0;">
          <el-col :span="12">
            <el-form-item label="特殊字符" prop="hasSpecial">
              <el-radio-group v-model="form.hasSpecial">
                <el-radio :label="0">必须包含</el-radio>
                <el-radio :label="2">不限制</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="特殊字符范围"
              prop="characters"
              v-if="form.hasSpecial === 0"
            >
              <common-input
                v-model="form.characters"
                :verify="false"
                placeholder="包含部分即可"
              />
            </el-form-item>
          </el-col>
        </el-col>

        <el-col :span="12">
          <el-form-item label="密码有效期" prop="validDays">
            <common-input-number :max-length="4" v-model="form.validDays"/>
            <span class="form-int">天</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码过期前" prop="notifyDays">
            <common-input-number :max-length="3" v-model="form.notifyDays"/>
            <span class="form-int">天提醒</span>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="padding: 0;">
          <el-col :span="12">
            <el-form-item label="历史重复次数" prop="pwdHistroyNumberState">
              <el-radio-group v-model="form.pwdHistroyNumberState">
                <el-radio :label="0">
                  <span style="width: 56px;display: inline-block">启用</span>
                </el-radio>
                <el-radio :label="1">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <template v-if="form.pwdHistroyNumberState === 0">
            <el-col :span="12">
              <el-form-item label="不能使用最近" prop="pwdHistroyNumber">
                <common-input-number :max-length="1" v-model="form.pwdHistroyNumber"/>
                <span class="form-int">次使用过的密码</span>
              </el-form-item>
            </el-col>
          </template>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账号冻结" prop="updatePwdErrorCount">
            <common-input-number :max-length="3" v-model="form.updatePwdErrorCount"/>
            <span class="form-int">次原密码输入错误后冻结账号</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账号冻结时间" prop="updatePwdErrorFreezeLong">
            <common-input-number :max-length="5" v-model="form.updatePwdErrorFreezeLong"/>
            <span class="form-int">分钟</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </common-edit-dialog>
</template>

<script>
import { pwdrule_updatePwdRule } from '@/api/management/configure/index.js'

export default {
  components: {},
  props: {},
  data() {
    return {
      isPersistenceLoading: false,
      dialogTitle: '编辑密码策略', // 标题
      dialogShow: false, // 是否显示
      form: {
        hasSpecial: '0'
      },
      rules: {
        ruleName: [
          { required: true, message: '请输入策略名称', trigger: 'blur' }
        ],
        minLength: [
          { required: true, message: '请输入最小值', trigger: 'blur' },
          { type: 'number', min: 0, max: 64, message: '取值范围0-64', trigger: 'blur' }
        ],
        maxLength: [
          { required: true, message: '请输入最大值', trigger: 'blur' },
          { type: 'number', min: 0, max: 64, message: '取值范围0-64', trigger: 'blur' }
        ],
        validDays: [
          { required: true, message: '请输入密码有效期', trigger: 'blur' },
          {
            min: 1,
            max: 9999,
            type: 'number',
            message: '密码有效期范围1-9999',
            trigger: 'blur'
          }
        ],
        notifyDays: [
          {
            required: true,
            message: '请输入天数',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 999,
            type: 'number',
            message: '密码过期提醒天数范围1-999',
            trigger: 'blur'
          }
        ],
        pwdHistroyNumber: [
          {
            required: true,
            message: '请输入历史密码重复次数',
            trigger: 'blur'
          },
          {
            min: 0,
            max: 9,
            type: 'number',
            message: '历史密码重复次数范围0-9',
            trigger: 'blur'
          }
        ],
        updatePwdErrorCount: [
          {
            required: true,
            message: '请输入账号冻结次数',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 999,
            type: 'number',
            message: '账号冻结次数范围1-999',
            trigger: 'blur'
          }
        ],
        updatePwdErrorFreezeLong: [
          {
            required: true,
            message: '请输入账号冻结时间',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 99999,
            type: 'number',
            message: '账号冻结范围1-99999',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {},
  computed: {},
  methods: {
    /**
     * 关闭
     */
    close() {
      // this.$refs.form.resetFields()
      this.dialogShow = false;
      this.$emit('refresh')
    },
    /**
     * 显示
     */
    show(data) {
      // this.dialogTitle = data.id ? '编辑' : '新增';
      this.dialogShow = true
      this.form = data.userPwdRuleId ? data : this.$options.data().form
    },
    /**
     * 提交
     */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.userPwdRuleId) {
            if (this.form.hasSpecial !== 0) {
              this.form.characters = null
            }
            if (!this.isPersistenceLoading) {
              this.isPersistenceLoading = true
              pwdrule_updatePwdRule(this.form)
                .then((res) => {
                  if (res && res.code === 200) {
                    this.$GlobalSuccessMessage('编辑成功')
                    this.close()
                  } else {
                    this.$GlobalErrorConfirm('编辑失败', res.msg)
                  }
                })
                .finally(() => {
                  this.isPersistenceLoading = false
                })
            }
          }
        }
      })
    }
  },
  created() {
  },
  mounted() {
  }
}
</script>
<style lang="scss" scoped>
.el-input-number--medium {
  width: 100%;
}

.form-int {
  padding-left: 8px;
}

.dialog-form {
  .el-col {
    height: 50px;
  }
}

::v-deep .maxLength {
  .el-form-item__content {
    margin-left: 0 !important;
  }
}
</style>
